<template>
  <customContainer ref="customContainerRef" :config="config" />
  <div>
    <el-dialog
      v-model="open"
      title="详情"
      :before-close="cancle1"
      fullscreen
    >
      <subIndex ref="subRef"></subIndex>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, getCurrentInstance, computed, defineAsyncComponent } from 'vue'
import { Edit, Bottom, Delete } from '@element-plus/icons-vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { transferList, checkIn, cancel } from '@/api/expressManager/zy'

const subIndex = defineAsyncComponent(() => import('./components/subIndex.vue'))
const customContainerRef = ref(null),
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()

const queryParams = ref({
  serialNumber: '',
  transferSite: '',
  expressNo: '',
  waybillNo: '',
  orderNo: '',
})
const open = ref(false)
const cancle1 = () => {
  open.value = false
}
const exportLoading = ref(false)
const exportss = () => {
  exportLoading.value = true
  $download('order/transfer/export', queryParams.value, `转运__${ new Date().getTime() }.xlsx`).then(() => {
    exportLoading.value = false
  }).catch(() => {
    exportLoading.value = false
  })
}
const checkInExport = () => {
  const ids = JSON.parse(JSON.stringify(idss.value))
  ElMessageBox.confirm('确认签入？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    checkIn(ids).then(res => {
      if (res.code == 200) {
        customContainerRef.value.getList()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
const handleRevoke = () => {
  const ids = JSON.parse(JSON.stringify(idss.value))
  ElMessageBox.confirm('确认撤销？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    cancel(ids).then(res => {
      if (res.code == 200) {
        customContainerRef.value.getList()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
// 详情
const subRef = ref([])
const handleDetail = (row: { [key: string]: any }) => {
  console.log(row)
  nextTick(() => {
    console.log(subRef.value)
  })
  open.value = true
  console.log(subRef.value)
  subRef.value.idsss = row.id
  subRef.value.serNum = row.serialNumber
  // console.log(row.id, row.serialNumber)
  subRef.value.getList()
  subRef.value.getList2()
}
const idss = ref([])
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  single.value = rows.length != 1
  multiple.value = !rows.length
  idss.value = rows.map((item) => item.id)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '转运批次号',
            prop: 'serialNumber',
            option: {
              placeholder: '请输入转运批次号',
            },
          },
          {
            type: 'select',
            label: '收货站点',
            prop: 'transferSite',
            option: {
              dictInfo: { dict: DictDirection.收货站点 },
            },
          },
          {
            label: '快递单/车牌',
            prop: 'expressNo',
           
          },
          {
            label: '客户单号',
            prop: 'waybillNo',
           
          },
          {
            label: '系统单号',
            prop: 'orderNo',
           
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
            option: {
              dictInfo: { dict: DictDirection.转运签入状态 },
            },
          },
        ],
        queryParams: queryParams.value,
      },
      btns: [
        {
          title: '导出',
          type: 'success',
          icon: Edit,
          onclick: exportss,
        },
        {
          title: '签入',
          disabled: single.value,
          onclick: checkInExport,
          type: 'warning',
          icon: Bottom,
        },
        {
          title: '撤销',
          disabled: single.value,
          onclick: handleRevoke,
          type: 'warning',
          icon: Delete,
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '转运批次号', align: 'center', prop: 'serialNumber' },
          { label: '转出站点',
            align: 'center',
            prop: 'site',
            width: '120',
            autoFormatter: {
              dict: DictDirection.收货站点,
              rowKey: 'site',
            } },
          { label: '转入站点',
            align: 'center',
            prop: 'transferSite',
            width: '120',
            autoFormatter: {
              dict: DictDirection.收货站点,
              rowKey: 'transferSite',
            } },
          { label: '快递单号', align: 'center', prop: 'expressNo', width: '120' },
          { label: '运输方式',
            align: 'center',
            prop: 'transportMode',
            autoFormatter: {
              dict: DictDirection.运输类型,
              rowKey: 'transportMode',
            } },
          { label: '金额', align: 'center', prop: 'amount', width: '120' },
          { label: '状态',
            align: 'center',
            prop: 'status',
            width: '120',
            autoFormatter: {
              dict: DictDirection.转运签入状态,
              rowKey: 'status',
            } },
          { label: '创建人', align: 'center', prop: 'createUser', width: '120' },
          { label: '转运时间', align: 'center', prop: 'createDay' },
          { label: '虚拟柜号', align: 'center', prop: 'cabinetNo', width: '100' },
          {
            label: '操作',
            align: 'center',
            width: '120',
            fixed: 'right',
            render(h, params) {
              const buttons = [
                {
                  title: '详情',
                  icon: Edit,
                  clickFun: handleDetail,
                },
               
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: transferList,
      customKey: 'express/mainBusiness/transportManagement',
    }
  },
  set(val) {
    return val
  },
})

</script>